<template>
  <div>
    <div class="table-operator">
      <a-table
        bordered
        size="middle"
        :row-key="(record) => record.payment_id"
        :columns="fzcColumns"
        :data-source="fzcData"
      >
        <template slot="title">
          <a-button size="small" type="primary" icon="plus" @click="onModal">非正常申请</a-button>
        </template>
        <template slot="status">
          <a-button type="primary" size="small" ghost>待审核</a-button>
<!--          <a-button type="primary" size="small" ghost>审核通过</a-button>-->
<!--          <a-button type="primary" size="small" ghost>审核不过</a-button>-->
        </template>
        <template slot="amount" slot-scope="text">
          <a-tag color="red">{{ text }}</a-tag>
        </template>
        <template slot="receive_account_type" slot-scope="text">
          {{ accountOptions[text] }}
        </template>
        <template slot="img" slot-scope="text">
          <a :href="text" target="_blank">
            <img :src="text" width="30" height="30">
          </a>
        </template>
        <template slot="action" slot-scope="text, record">
          <a-button type="primary" size="small" style="margin-right:10px" @click="editModal(record.payment_id)">编辑</a-button>
          <a-popconfirm
            title="是否删除打款"
            ok-text="确定"
            cancel-text="取消"
            @confirm="onDel(record.payment_id)"
          >
            <a-button type="danger" size="small">删除</a-button>
          </a-popconfirm>
        </template>
      </a-table>
    </div>
    <a-modal
      title="非正常业务申请"
      v-model="visible"
      :width="800"
    >
      <a-form-model-item :label-col="{ span: 8 }" :wrapper-col="{ span: 12 }" label="选择非常规业务类型">
        <a-radio-group v-model="formType">
          <a-radio-button :value="1">退款</a-radio-button>
          <a-radio-button :value="2">拆分</a-radio-button>
          <a-radio-button :value="3">双保</a-radio-button>
          <a-radio-button :value="4">变更</a-radio-button>
          <a-radio-button :value="5">售后</a-radio-button>
        </a-radio-group>
      </a-form-model-item>
      <a-divider />
      <refund-form v-if="formType == 1"></refund-form>
      <split-form v-if="formType == 2"></split-form>
      <double-form v-if="formType == 3"></double-form>
      <change-form v-if="formType == 4"></change-form>
      <market-form v-if="formType == 5"></market-form>
    </a-modal>
  </div>
</template>

<script>
  import ChangeForm from '@/views/contract/components/form/ChangeForm'
  import RefundForm from '@/views/contract/components/form/RefundForm'
  import DoubleForm from '@/views/contract/components/form/DoubleForm'
  import MarketForm from '@/views/contract/components/form/MarketForm'
  import SplitForm from '@/views/contract/components/form/SplitForm'
  import contractColumns from '@/columns/contract'

  export default {
    components: {
      SplitForm,
      MarketForm,
      ChangeForm,
      RefundForm,
      DoubleForm
    },
    name: 'ContractOther',
    data () {
      return {
        visible: false,
        fzcColumns: contractColumns.fzc,
        fzcData: [
          {
            sort: '1',
            time: '2022/5/2',
            type: '退款',
            old_no: 'YW20111113',
            new_no: 'YW20221113'
          }
        ],
        fzcForm: {},
        fzcRules: {},
        waterColumns: contractColumns.water,
        waterData: [],
        formType: 0
      }
    },
    methods: {
      onModal () {
        this.visible = true
      }
    }
  }
</script>

<style scoped>

</style>
